<template>
    <div class="goods">
        <el-input placeholder="请输入内容" v-model="params.query" class="input-with-select ssval">
            <el-button slot="append" icon="el-icon-search" @click="ssval"></el-button>
        </el-input>
        <el-button type="primary" @click="$router.push('/add')">添加商品</el-button>
        <!-- 表格 -->
        <template>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column prop="goods_name" label="商品名称">
                </el-table-column>
                <el-table-column prop="goods_price" label="商品价格(元)">
                </el-table-column>
                <el-table-column prop="goods_weight" label="商品重量">
                </el-table-column>
                <el-table-column prop="add_time" label="创建时间">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini">编辑</el-button>
                        <el-button size="mini" type="danger" @click="del(scope.row.goods_id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!-- 分页 -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="params.pagenum" :page-sizes="[10, 20, 30, 40]" :page-size="params.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getgoods, getgoodsdel } from "../utils/goodes"
export default {
    data() {
        return {
            tableData: [],
            params: {
                query: "",
                pagenum: 1,
                pagesize: 10
            },
            total: 0
        }
    },
    methods: {
        //请求商品列表
        getDatagoods() {
            getgoods(this.params).then(res => {
                console.log(59, res);
                this.tableData = res.data.goods
                this.total = res.data.total
            })
        },
        // 分页条数
        handleSizeChange(val) {
            this.params.pagesize = val
            this.getDatagoods()
        },
        //分页页数
        handleCurrentChange(val) {
            this.params.pagenum = val
            this.getDatagoods()
        },
        // 搜索
        ssval() {
            this.getDatagoods()
        },
        //删除
        del(id) {
            getgoodsdel(id).then(res => {
                // console.log(78, res);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.getDatagoods()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            })
        }
    },
    created() {
        this.getDatagoods()
    },
    mounted() {

    },
    components: {

    },
    computed: {

    },
    watch: {

    },
}
</script>

<style lang='scss' scoped>
.goods {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
}

.ssval {
    width: 30%;
    margin-right: 20px;
}
</style>
